import React, {
  Component,
  forwardRef,
  useRef,
  useImperativeHandle,
} from "react";
/* 
useInperativeHandle  通过ref暴露子组件中的方法
*/
const Son = forwardRef((props, ref) => {
  let iptRef = useRef();
  const focus = () => {
    iptRef.current.focus();
  };
  useImperativeHandle(ref, () => {
    return {
      focus,
    };
  });
  return (
    <>
      <input type="text" ref={iptRef} />
    </>
  );
});
export default function ForwardRef() {
  let iptRef = useRef(null);
  let clIpt = () => {
    iptRef.current.focus();
  };
  return (
    <div>
      <h1>forwardRef使用</h1>
      <p>son</p>
      <Son ref={iptRef}></Son>
      <button onClick={clIpt}>input聚焦</button>
    </div>
  );
}
